<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-05-24 16:25:28
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-08-05 09:00:39
 * @FilePath     : \rpms\src\views\project\kanban\components\list.vue
-->
<template>
  <div class="type-list">
    <el-card class="box-card">
      <div
        v-for="(item, index) in model.typeList"
        :key="index"
        class="item"
        :class="{ active: model.type === index }"
        @click="changeType(item, index)"
      >
        <p>{{ item.name }}</p>
      </div>
    </el-card>
    <div class="list-box" v-if="model.type < 3">
      <div
        class="item-box"
        v-for="(item, index) in model.dataList"
        :key="index"
        @click="handleToPreview(item)"
      >
        <div class="title">{{ item.title }}</div>
        <div class="des">
          {{ item.summary }}
          <!-- 公告摘要：论文摘要是全文的精华，是对一项科学研究工作或技术实践的总结，对研究目的、方法和研究结果的概括。摘要置于主体部分之前，目的是让读者首先了解一下论文的内容，以便决定是否阅读全文。一般来说，这种摘要在全文完成之后写。内容包括研究目的、研究方法、研究结果和主要结论。也就是说，摘要必须回答“研究什么”、“怎么研究”、“得到了什么结果”、“结果说明了什么”等问题。 -->
        </div>
        <div class="footer">
          <span class="time">{{ item.publishTime }}</span>
          <span class="company">{{ item.createUserName }}</span>
        </div>
      </div>

      <re-pagination
        :total="model.total"
        v-show="model.total > 0"
        v-model:page="model.pageNum"
        v-model:limit="model.pageSize"
        @pagination="getDataList"
      />
    </div>
    <div v-else class="list-box">
      <el-tabs v-model="model.activeName">
        <el-tab-pane
          v-for="item in model.libType"
          :key="item.type"
          :label="item.name"
          :name="item.type"
        >
          <div v-for="(obj, index) in item.list" :key="index">
            <el-link
              :underline="false"
              :href="obj.dataLink"
              class="link-item"
              target="_blank"
              >{{ obj.dataText }}</el-link
            >
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { postAnnouncementList, postInformationList } from "/@/api/information";
import * as api from "/@/api/communicate";
import { postProjectDataLibs } from "/@/api/project";

export default defineComponent({
  name: "typeLIst",
  setup() {
    const route = useRoute();
    const router = useRouter();

    const model = reactive({
      activeName: "1",
      libType: [
        { name: "中文数据库", type: "1", list: [] },
        { name: "外文数据库", type: "2", list: [] },
        { name: "专利数据库", type: "3", list: [] },
        { name: "食品标准", type: "4", list: [] },
        { name: "啤酒专业网站", type: "5", list: [] },
        { name: "酵母专业网站", type: "6", list: [] },
        { name: "包装专业网站", type: "7", list: [] },
        { name: "学习提升网站", type: "8", list: [] }
      ],
      typeList: [
        {
          name: "学术交流",
          api: api.postCommunicateList,
          router: "/project/kanban/academic"
        },
        {
          name: "公告",
          api: postAnnouncementList,
          router: "/project/kanban/notice"
        },
        {
          name: "前沿资讯",
          api: postInformationList,
          router: "/project/kanban/information"
        },
        { name: "知识库", router: "/project/kanban/library", api: "" }
      ],
      type: 0,
      total: 0,

      pageNum: 1,
      pageSize: 5,
      dataList: []
    });
    model.type = +route.query.index;

    const getDataList = async () => {
      const modelObj = model.typeList[model.type];
      if (modelObj.api !== "") {
        const params = {
          publishType: "1",
          pageNum: model.pageNum,
          pageSize: model.pageSize
        };
        const { code, data } = await (model.typeList[model.type] as any).api(
          params
        );
        if (code === 200) {
          model.total = data.rows;
          if (model.type === 0) {
            data.list.map((el: any) => {
              el["publishTime"] = el.createTime;
              el["createUserName"] = el.createName;
            });
          }
          model.dataList = data.list;
        }
      }
    };

    const handleToPreview = item => {
      router.push({
        path: "/project/kanban/preview",
        query: { id: item.id, index: +route.query.index }
      });
    };

    const changeType = (item, index) => {
      // if (index === 3) {
      //   model.type = 3;
      // } else {
      // model.type = index;
      // getDataList();
      router.replace({ path: item.router, query: { index } });
      // }
    };

    const getDataLibs = async () => {
      const { code, data } = await postProjectDataLibs({});
      if (code === 200) {
        data.list.map(el => {
          const target = model.libType.find(lib => lib.type === el.dataType);
          if (target) {
            target.list.push(el);
          }
        });
        model.libType = model.libType.filter(el => el.list.length > 0);
        model.activeName = model.libType[0].type;
      }
    };

    onMounted(() => {
      getDataList();
      if (model.type === 3) {
        getDataLibs();
      }
    });
    return {
      model,
      getDataList,
      handleToPreview,
      changeType
    };
  }
});
</script>
<style lang="scss" scoped>
.type-list {
  display: flex;

  .box-card {
    width: 110px;
    height: 170px;

    .item {
      margin: 10px 0;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #666666;
      cursor: pointer;

      &:hover {
        color: #f89c34;
      }
    }

    .active {
      color: #f89c34;
    }
  }

  .list-box {
    flex: 1;
    margin-left: 20px;
    background: #fff;

    .item-box {
      margin: 20px;
      border-bottom: 1px solid #ddd;
      cursor: pointer;

      .title {
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: bold;
        font-style: normal;
        font-size: 18px;
        margin: 12px 0;
      }

      .des {
        font-size: 14px;
        font-family: "PingFangSC-Regular", "PingFang SC";
        font-weight: 400;
        font-style: normal;
        color: #666666;
        margin-bottom: 12px;
        // line-clamp: 3;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .footer {
        margin-bottom: 12px;

        .time,
        .company {
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          font-style: normal;
          color: #999999;
          font-size: 14px;
          margin-right: 14px;
        }
      }
    }

    :deep .el-tabs__nav-wrap {
      margin-left: 20px;
    }

    .el-link {
      margin: 0 20px 10px;
    }
  }

  .pagination {
    text-align: right;
    padding: 20px;
  }
}
</style>
